<%--
Created by IntelliJ IDEA.
User: 20180801
Date: 2018/9/17
Time: 13:44
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Animation</title>
</head>
<body>
<img src="/images/1.jpg" id="msg1"/>
</body>
<script>
    var p1 = document.getElementById('msg1');
    p1.style.top = '0px';
    p1.style.left = '0px';
    p1.style.position='absolute';

    moveMsg('msg1',1000,1000,20);

    function moveMsg(elemId,final_x,final_y,ms) {
        var p1 = document.getElementById(elemId);
        var xpos = parseInt(p1.style.left);
        var ypos = parseInt(p1.style.top);
        if (xpos === final_x && ypos === final_y) {
            return;
        }
        if (xpos < final_x) {
            xpos++;
        }
        if (xpos > final_x) {
            xpos--;
        }
        if (ypos < final_y) {
            ypos++;
        }
        if (ypos > final_y) {
            ypos--;
        }
        p1.style.left  = xpos+'px';
        p1.style.top=ypos+'px';
        setTimeout("moveMsg('"+elemId+"',"+final_x+","+final_y+","+ms+")",ms);
        return true;
    }
</script>
</html>
